<template>
    <div class="content">
        <div class="clear">
            <div class="headerleft">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="管理员" name="first">
                        <div v-if="activeName==='first'">
                            <div class="header_left">
                                <el-button type="success" @click="jumpAdministrator">添加管理员</el-button>
                            </div>
                            <div class="headertwo">
                                <div class="headertwo_one">
                                    <h5>状态</h5>
                                    <div class="headertwo_one_one">
                                        <template>
                                            <el-select v-model="value" placeholder="全部">
                                                <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </template>
                                    </div>
                                </div>
                                <div class="headertwo_two">
                                    <h5>角色</h5>
                                    <template>
                                        <el-select v-model="tableData4Name" placeholder="全部">
                                            <el-option
                                            v-for="(item,index) in tableData4"
                                            :key="index"
                                            :label="item.value"
                                            :value="item.role_name">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </div>
                                <div class="headertwo_three">
                                    <h5>部门</h5>
                                    <template>
                                        <el-select v-model="tableData3Name" placeholder="全部">
                                            <el-option
                                            v-for="(item,index) in tableData3"
                                            :key="index"
                                            :label="item.value"
                                            :value="item.depart_name">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </div>
                                <div class="inputkuang">
                                    <el-button type="success">搜索</el-button>
                                </div>
                            </div>
                            <el-table :data="datata" style="width: 100%" >
                                <el-table-column prop="admin_account" label="账号" min-width=""></el-table-column>
                                <el-table-column prop="admin_name" label="姓名" width=""></el-table-column>
                                <el-table-column prop="depart_name" label="部门" width=""></el-table-column>
                                <el-table-column prop="role_name" label="角色" width=""></el-table-column>
                                <el-table-column prop="admin_hostory" label="上次登录时间" min-width="140"></el-table-column>
                                <el-table-column prop="admin_count" label="登录次数" width=""></el-table-column>
                                <el-table-column prop="admin_state" label="状态" width=""></el-table-column>
                                <el-table-column prop="status" label="操作" width="260">
                                    <template slot-scope="scope">
                                        <el-button @click="dialogFormVisible1 = true"> 修改</el-button>
                                        <el-button  @click="UpdateAdminst(scope.row)"> 权限</el-button>
                                        <el-button> 删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="部门" name="second">
                        <div v-if="activeName==='second'">
                            <div class="department_right">
                                <el-button type="success" @click="pushDepartment()">添加部门</el-button>
                            </div>
                            <el-table
                                :data="tableData1"
                                row-key="depart_id"
                                border
                                lazy                                
                                :load="load"
                                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                                <el-table-column
                                prop="depart_name"
                                label="部门&成员"
                                width=''
                                >
                                </el-table-column>
                                <el-table-column
                                label="操作"
                                width="210">
                                <template>
                                    <el-button type="primary" @click="dialogFormVisible  = true">修改</el-button>
                                    <el-button type="danger">删除</el-button>
                                </template>
                                </el-table-column>
                            </el-table>
                        </div> 
                    </el-tab-pane>
                    <el-tab-pane label="角色" name="third">
                        <div v-if="activeName==='third'">
                            <div class="department_right">
                                <el-button type="success" @click="pushRole">添加角色</el-button>
                            </div>
                            <el-table
                                :data="tableData"
                                style="width: 100%">
                                <el-table-column
                                    prop="role_name"
                                    label="角色"
                                    width="">
                                </el-table-column>
                                <el-table-column
                                    prop="role_id"
                                    label="id">
                                </el-table-column>  
                                <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="210">
                                    <template slot-scope="scope">
                                        <el-button @click="updateRole(scope.row)" size="small">编辑</el-button>
                                        <el-button @click="delRole(scope.row)" size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="block">
                                <el-pagination
                                    :page-size='2'
                                    layout="prev, pager, next"
                                    :page-count="pageCount"
                                    @current-change="fenye">
                                </el-pagination>
                            </div>
                        </div> 
                    </el-tab-pane>
                </el-tabs>
                <!-- //部门修改表// -->
                <el-dialog title="修改部门" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="上级部门" :label-width="formLabelWidth">
                        <el-select v-model="form.depart_p_id" placeholder="选择部门">
                            <el-option label="无" value=""></el-option>
                            <el-option label="新房编辑部" value="1"></el-option>
                            <el-option label="运营部" value="5"></el-option>
                            <el-option label="系统管理部" value="8"></el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="部门名称" :label-width="formLabelWidth">
                        <el-input v-model="form.depart_name" autocomplete="off"></el-input>
                        </el-form-item>
                        <div class="headertwo_two">
                            <h5>领导</h5>
                            <template>
                                <el-select v-model="tableData4Name" placeholder="全部">
                                    <el-option
                                    v-for="(item,index) in tableData4"
                                    :key="index"
                                    :label="item.value"
                                    :value="item.role_name">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                        <div class="headertwo_two">
                            <h5>角色</h5>
                            <template>
                                <el-select v-model="tableData5Name" placeholder="全部">
                                    <el-option
                                    v-for="(item,index) in tableData5"
                                    :key="index"
                                    :label="item.value"
                                    :value="item.role_name">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible  = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible  = false">确 定</el-button>
                    </div>
                </el-dialog>
                 <!-- //管理员修改表// -->
                <el-dialog title="修改管理员" :visible.sync="dialogFormVisible1">
                    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="账号" prop="admin_account">
                        <el-input v-model="ruleForm.admin_account"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="admin_pwd">
                        <el-input v-model="ruleForm.admin_pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="admin_name">
                        <el-input v-model="ruleForm.admin_name"></el-input>
                    </el-form-item>                     
                    <el-form-item label="所属部门" prop="admin_depart">
                        <el-select v-model="ruleForm.admin_depart" placeholder="请选择部门">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属角色" prop="role_id">
                        <el-select v-model="ruleForm.role_id" placeholder="请选择角色">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="admin_phone">
                        <el-input v-model="ruleForm.admin_phone"></el-input>
                    </el-form-item>
                    <el-form-item label="一句话自述" prop="self_description">
                        <el-input type="textarea" v-model="ruleForm.self_description"></el-input>
                    </el-form-item>
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload> 
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import uitls from '../utils/uitls.js'
import * as api from '../utils/api'
export default {
    name:"user",
    data() {
        return {
            fileList: [{name: '', url: ''}],
            dialogFormVisible : false,
            dialogFormVisible1 : false,
            form: {
                depart_name: '',
                role_id:'',
                role_id1:'',
                depart_p_id:'',
            },
            formLabelWidth: '120px',
            ruleForm: {
                admin_account: '',
                admin_pwd: '',
                admin_name: '',
                admin_depart: '',
                role_id: '',
                admin_phone: '',
                self_description: ''
            },
            //tabs标签页
            activeName:this.$store.state.Department.activeName,
            //管理员input输入框
            restaurants: [],
            pageCount:1,
            currentPage:1,
            totalPage:2,
            state: '',
            //管理员select选择器
            options: [{
            value: '1',
            label: '正常'
            },{
            value: '2',
            label: '已删除'
            }],
            value: '',
            tableData3Name:'',
            tableData4Name:'',
            tableData5Name:'',
            tableData3:[],
            tableData4:[],
            tableData5:[],
            //部门懒加载//
            tableData1: [{
                depart_id: '',
                depart_name: '',
                adminCount:'',
                hasChildren: true
                }],
            //角色表数据
             tableData: [{
                role_name: '',
                adminCount: '',
            }],
            //管理员数据
            datata:[{
               admin_account:'asd' ,
               admin_name:'天明' ,
               depart_name:'新房编辑部' ,
               role_name:'编辑' ,
               admin_hostory:'2020-02-20' ,
               admin_count:'12' ,
               admin_state:'正常' ,
            },{
               admin_account:'asddasd' ,
               admin_name:' 少司命' ,
               depart_name:'系统管理部' ,
               role_name:'超级管理员' ,
               admin_hostory:'2020-02-28' ,
               admin_count:'12123' ,
               admin_state:'正常' ,
            },{
                admin_account:'ada' ,
               admin_name:' 雪女' ,
               depart_name:'系统管理部' ,
               role_name:'超级管理员' ,
               admin_hostory:'2020-11-28' ,
               admin_count:'8' ,
               admin_state:'正常' ,
            },{
                admin_account:'asddaff' ,
                admin_name:' 卫庄' ,
                depart_name:'系统管理部' ,
                role_name:'超级管理员' ,
                admin_hostory:'2020-09-28' ,
                admin_count:'78' ,
                admin_state:'正常' ,     
            }],
            //角色id
            rloeID:[]
        }
    },
    computed: {
          
    },
    methods: {
        //管理员input输入框
        querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        cb(results);
        },
        createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
        },
        loadAll() {
            
         },
        handleSelect(item) {
       
        },
        handleIconClick(ev) {
       
        },
        //部门table表格懒加载下拉//
        load(tree, treeNode, resolve) {
            this.axios.get(api.GET_DEPARTTWO,{
                params:{
                    // depart_id:tree.depart_id
                }
            }).then(data=>{
                setTimeout(()=>{
                    resolve(data.data.data)
                },1000)
            })
      },
        //页面跳转点击事件//
        handleClick(row) {
        this.$store.dispatch("changName",this.activeName)
      },
      //管理员跳转新增管理员//
        jumpAdministrator(){
          this.$router.push({
               name:'Administrator',
               path:'/Home/Permissions/Administrator',
               query: {

                    },
          })
          
        },
        pushDepartment(){
          this.$router.push({
               name:'Department',
               path:'/Home/Permissions/Department',
               query: {

                    },
          })
        },
        pushRole(){
           this.$router.push({
               name:'Role',
               path:'/Home/Permissions/Role',
               query: {

                    },
          })
        },
        //添加角色
        updateRole(row){
            console.log(row);
            this.$router.push({
               name:'UpdateRole',
               path:'/Home/Permissions/UpdateRole',
               query: [
                   this.axios({
                method:'get',
                url:api.GET_FINDROLE,
                params:{
                    
                }
            }).then((data)=>{
                role_name:this.role_name,
                this.data =data.data.data
                
            })
               ],
          })
        },
        //添加管理员
        UpdateAdminst(row){
            // console.log(row);
            this.$router.push({
               name:'UpdateAdmin',
               path:'/Home/Permissions/UpdateAdmin',
               query: {
                //    this.axios({
                // method:'get',
                // url:'http://172.16.10.84:8080/role/findRole',
                // params:{
                    
                // }
            }
            }).then((data)=>{
                role_name:this.role_name,
                this.data =data.data.data
                
            })
        },
        //分页
        fenye(val){
            this.currentPage = val;
            
           this.getallRole()

        },
        //图片路径
        handlePreview(file) {
            console.log(file);
        },
        handleRemove(file, fileList) {
        console.log(file, fileList);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //得到角色
        getallRole(){
            // console.log('this.currentPage')
            // console.log(this.currentPage);
             this.axios({
                method:'get',
                url:api.GET_FINDROLE,
                params:{
                    currentPage:this.currentPage,
                    pageSize:2,
                }
            }).then((data)=>{
                // console.log(data);
                this.pageCount =data.data.data.totalPage
                this.tableData = data.data.data.dataList
            })
        },
        //管理员角色下拉列表
        getallRole1(){
            this.axios({
                method:'get',
                url:api.GET_FINDROLENAME,
            }).then((data)=>{
                console.log(data);
                this.tableData4 =data.data.data
                // console.log(this.tableData4);
            })
        },
        //管理员状态下拉列表
        getadmin_state(){
            this.axios({
                method:'get',
                url:api.GET_ADMIN,
            }).then((data)=>{
                for(let i=0;i<data.data.data.dataList.length;i++){
                    this.tableData5 = data.data.data.dataList[0].admin_state
                    console.log(this.tableData5);
                    
                }
            })
        },
        //管理员数据
        // getallAdmin(){
        //     this.axios({
        //         method:'get',
        //         // url:api.GET_ADMIN,

        // }).then((data)=>{
        //     // console.log(data);
        //      this.datata =data.data.dataList

        //     // console.log(this.datata);
        // })          
        // },
        //所有部门
        getallDepart(){
            this.axios({
                method:'get',
                url:api.GET_DEPART,
                props:{
                    depart_id:''
                }
            }).then((data)=>{
                console.log(data);
                this.tableData1 =data.data.data
                for (const key in this.tableData1) {
                    this.tableData1[key].hasChildren=true
                }
            })
        },
        //管理员部门下拉列表
        getallDepart1(){
            this.axios({
                method:'get',
                url:api.GET_DEPART,
            }).then((data)=>{
                this.tableData3 =data.data.data
                console.log(data);
                // console.log( this.tableData3);
            })
        },
        //角色所有的权限
        addRoleQiangxiang(){
            this.axios({
            method:'get',
            url:api.GET_FINDAUTH,
        }).then((data)=>{
            // console.log(data);
            // this.datata =data.data.dataList
        })   
        },
        //删除角色
        delRole(row){
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.axios({
                        method:'post',
                        url:api.POST_DELROLE,
                        data:{
                            role_id:row.role_id,
                        }
                    })
                    .then((data)=>{
                        if(status===200){
                            this.$message({
                            type: 'success',
                            message: '删除成功!',
                           
                        })}
                        else if(status ===500){
                            this.$message({
                                type: 'info',
                                message: '删除失败!',
                                })
                        } this.getallRole()
                    })
                
                })
                .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除  '
                });          
            })
           
        },
    },
    created(){
        this.activeName=this.$store.state.Department.activeName,
        // this.getallAdmin()
        this.getallRole()
        this.getallDepart()
        this.addRoleQiangxiang()
        this.getallDepart1()
        this.getallRole1()
        this.getadmin_state()
    },      
  
    mounted() {
        //管理员input输入框
        // this.restaurants = this.loadAll();
    }
}
</script>

<style lang='less' scoped>
.content{
    width: 98%;
    margin: 0 auto;
}
.clear:after {
    content: "";
    display: block;
    clear: both;
}
.header_left{
    float:right;
    padding: 2% 0;
}
.headertwo{
    // background-color: aqua;
    height: 100%;
    float: left;
    padding: 2% 0;
}
.headertwo_one{
    float: left;
    width: 250px;
}
.headertwo_two{
    float: left;
    width: 250px;
}
.headertwo_three{
    float: left;
    width: 250px;
}
.headertwo_one h5{
    float: left;
    color: dimgrey;
    height: 40px;
    line-height: 40px;
}
.headertwo_two h5{
    float: left;
    color: dimgrey;
    height: 40px;
    line-height: 40px;
}
.headertwo_three h5{
    float: left;
    color: dimgrey;
    height: 40px;
    line-height: 40px;
}
.headertwo_one .el-select{
    float: left;
}
.el-dropdown-link {
    cursor: pointer;
    color: #666768;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.inputkuang{
    float: right;
}
.inputkuang h5{
    float: left;
    height: 40px;
    line-height: 40px;
    color: dimgrey;
}
.my-autocomplete {
    float: left;
    li {
        line-height: normal;
        padding: 7px;

        .name {
        text-overflow: ellipsis;
        overflow: hidden;
        }
        .addr {
        font-size: 12px;
        color: #b4b4b4;
        }

        .highlighted .addr {
        color: #ddd;
        }
    }
}
.department_right{
    float:right;
    padding: 10px 50px 10px 0;
}
</style>